<template>

    <div class="box-shadow dev formList">
        <div style="height: 100%">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">

            <div style="margin-top: 30px">
              <i class="icon2"></i>
              <div class="headline2">
                <span>结算规则</span>
              </div>
            </div>

            <div class="dev2">
              <el-form-item style="position: relative;left: -10px" label-width="110px" label="入驻结算规则" prop="settlement_id">
                <el-select
                  v-model="form.settlement_id"
                  placeholder="请选择结算规则"
                  clearable
                  size="medium"
                >
                  <el-option
                    v-for="dict in settlementRulesOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="行业" prop="qualification_type">
                <el-select
                  v-model="form.qualification_type"
                  placeholder="请选择行业"
                  clearable
                  size="medium"
                >
                  <el-option
                    v-for="dict in industryOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictLabel"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="特殊资质">

                <imageUpload v-model="wechatImg.qualifications" :mediaId.sync="form.qualifications"  :imageStr.sync="qualifications" size="5"></imageUpload>
              </el-form-item>
              <el-form-item>
                <div style="margin-left: 130%;display:flex;margin-bottom:20px">
                  <el-button type="primary" @click="submitForm">提交并保存</el-button>
                  <el-button @click="returnIndex">返回</el-button>
                </div>
              </el-form-item>

            </div>
          </el-form>
        </div>
      </div>

</template>

<script>
  import {getPayAudit, addSettlementInfo,getSettlementInfo} from '@/api/applet/payAudit'
  import imageUpload from "@/components/ImageUpload/wechatImgLsit";

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {imageUpload},
    props: { //组件传值
      settlementInfoStr: {
        type: Boolean,
        default: true,
      },
      indexStr: {
        type: Boolean,
        default: true,
      },
      businessCodeStr:{
        type: String,
        default: '',
      }
    },
    data() {
      //这里存数据
      return {
        //授权单对象
        payAudit:{},
        //特殊资质
        qualifications: "",
        //规则列表
        settlementRulesOptions: "",
        //行业列表
        industryOptions:"",
        wechatImg: {
          qualifications: ""
        },
        form: {},
        // 查询参数
        queryParams: {},
        // 表单校验
        rules: {
          settlement_id: [
          {
            required: true,
            message: "入驻结算规则不能为空",
            trigger: "blur",
          },
        ],
        qualification_type: [
          {
            required: true,
            message: "行业不能为空",
            trigger: "blur",
          },
        ],
        qualifications: [
          {
            required: true,
            message: "特殊资质不能为空",
            trigger: "blur",
          },
        ],
        }
      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      returnIndex() {
        window.scrollTo(0, 0);
        this.$emit("update:settlementInfoStr", false);
        this.$emit("update:indexStr", true);
        this.$emit('getData', null)
      },
      getSubjectInfo() {
        getSettlementInfo(this.businessCodeStr).then((response) => {
          this.form = response.data.settlementInfo
          this.payAudit = response.data
          if (response.data.subjectType == "SUBJECT_TYPE_INDIVIDUAL") {
            //个人
            this.getDicts('settlement_rules_personage').then((response) => {
              this.settlementRulesOptions = response.data
            })
          } else {
            //企业
            this.getDicts('settlement_rules_enterprise').then((response) => {
              this.settlementRulesOptions = response.data
            })
          }
          this.getDicts('wechat_qualification_type').then((response) => {
            this.industryOptions = response.data
          })

          if (response.data.wechatImgVO){
            this.qualifications = response.data.wechatImgVO.qualifications
          }

        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            addSettlementInfo(this.form,this.payAudit.businessCode).then((response) => {
              this.msgSuccess('提交成功')
              this.open = false
              this.returnIndex()
            })
          }
        })
      },
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getSubjectInfo();

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {
    },//生命周期 - 创建之前
    beforeMount() {
    },//生命周期 - 挂载之前
    beforeUpdate() {
    },//声明周期 - 更新之前
    updated() {
    },//生命周期 - 更新之后
    beforeDestroy() {
    },//生命周期 - 销毁之前
    destroyed() {
    },//生命周期 - 销毁之后
    activated() {
    },//缓存keep-alive
  }
</script>

<style scoped>

  .icon1 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
  }

  .icon2 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline2 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    margin-top: 20px;
  }


  .box-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .dev {
    margin-left: 10%;
    margin-top: 5%;
    width: 70%;
    height: 500px;
  }

  .dev2 {
    margin-left: 10%;
    margin-top: 5%;
    width: 50%;

  }
</style>
